<template>
	<view class="banmi_flex j-c">
		<view class="uni-popup-dialog">
			<view class="uni-dialog-title">
				<text class="v-text f38" style="color: #000;">添加关键词回复</text>
			</view>

			<view>


				<keyadd ref="alertDialog_add_key" @on_close="close">

				</keyadd>

				<uni-popup ref="alertDialog" type="dialog">
					<uni-popup-wx-text @on_xuanze="on_xuanze">
					</uni-popup-wx-text>
				</uni-popup>
				<uni-popup ref="alertDialog_image" type="dialog">
					<uni-popup-wx-image :t_type="t_type" :t_name="t_name" @on_add_img="on_add_img">
					</uni-popup-wx-image>
				</uni-popup>
				<uni-popup ref="alertDialog_applets" type="dialog">
					<uni-popup-wx-applets :t_type="t_type" :t_name="t_name" @on_add_img="on_add_applets">
					</uni-popup-wx-applets>
				</uni-popup>


			</view>



			<view class="uni-dialog-button-group">

				<button class="uni-dialog-button uni-border-left" @click="closeDialog">
					<text class="uni-dialog-button-text uni-button-color">关闭</text>
				</button>
				<button class="uni-dialog-button uni-border-left" @click="onplay">
					<text class="uni-dialog-button-text uni-button-color">添加1</text>
				</button>

			</view>
			<uni-popup ref="alertDialog_image_x" type="dialog">
				<uni-popup-wx-image :t_type="aa_type" :t_name="aa_name" @on_add_img="on_add_img">
				</uni-popup-wx-image>
			</uni-popup>
			<uni-popup ref="alertDialog_image_a" type="dialog">
				<uni-popup-wx-image :t_type="aa_type" :t_name="aa_name" @on_add_img="on_add_img1">
				</uni-popup-wx-image>
			</uni-popup>
		</view>
	</view>
</template>

<script>
	import popup from '../uni-popup/popup.js'
	import keyadd from '@/mi/wx_key_add.vue'
	import {
		initVueI18n
	} from '@dcloudio/uni-i18n'
	import messages from '../uni-popup/i18n/index.js'
	const {
		t
	} = initVueI18n(messages)
	/**
	 * PopUp 弹出层-对话框样式
	 * @description 弹出层-对话框样式
	 * @tutorial https://ext.dcloud.net.cn/plugin?id=329
	 * @property {String} value input 模式下的默认值
	 * @property {String} placeholder input 模式下输入提示
	 * @property {String} type = [success|warning|info|error] 主题样式
	 *  @value success 成功
	 * 	@value warning 提示
	 * 	@value info 消息
	 * 	@value error 错误
	 * @property {String} mode = [base|input] 模式、
	 * 	@value base 基础对话框
	 * 	@value input 可输入对话框
	 * @property {String} content 对话框内容
	 * @property {Boolean} beforeClose 是否拦截取消事件
	 * @event {Function} confirm 点击确认按钮触发
	 * @event {Function} close 点击取消按钮触发
	 */

	export default {
		components: {
			keyadd,
		},
		name: "uniPopupDialog",
		mixins: [popup],
		emits: ['confirm', 'close'],
		props: {
			issousuo: {
				type: String,
				default () {
					return '';
				}
			},
			value: {
				type: [String, Number],
				default: ''
			},
			sm: {
				type: [String, Number],
				default: ''
			},
			li: {
				type: Array,
				default () {
					return [];
				}
			},
			isvip: {
				type: [String, Number],
				default: ''
			},
			placeholder: {
				type: [String, Number],
				default: ''
			},
			type: {
				type: String,
				default: 'error'
			},


			beforeClose: {
				type: Boolean,
				default: false
			},
			cancelText: {
				type: String,
				default: ''
			},
			t_type: {
				type: String,
				default: ''
			},
			t_name: {
				type: String,
				default: ''
			},
		},
		data() {
			return {
				dialogType: 'error',
				focus: false,
				val: "",
				tabidnex: 1,
				zd_price: 0,
				key: '',
				title: '',
				url: '',
				appid: '',
				miniprogram: '',
				picurl: '',
				musicurl: '',
				description: '',
				music_img: '',


				img_url: '',
				aa_type: '',
				aa_name: '',
				find: {
					title: '',
					url: '',
					appid: '',
					miniprogram: '',
					img_url: '',
					media_id: '',
					type: 'applets'
				},
				codetime: 8,
				info: {},
				mode: 0,

				isstate: 1,


				reply_list: [],

				post_method: 0

			}
		},
		computed: {
			okText() {
				return this.confirmText || t("uni-popup.ok")
			},
			closeText() {
				return this.cancelText || t("uni-popup.cancel")
			},
			placeholderText() {
				return this.placeholder || t("uni-popup.placeholder")
			},
			titleText() {
				return this.title || t("uni-popup.title")
			}
		},
		watch: {
			type(val) {
				this.dialogType = val
			},
			mode(val) {
				if (val === 'input') {
					this.dialogType = 'info'
				}
			},
			value(val) {
				this.val = val
			}
		},
		created() {


			// 对话框遮罩不可点击
			this.popup.disableMask()
			// this.popup.closeMask()
			if (this.mode === 'input') {
				this.dialogType = 'info'
				this.val = this.value
			} else {
				this.dialogType = this.type
			}
		},
		mounted() {
			this.focus = true
		},
		methods: {
			on_add_img1(list) {
				this.media_id_mp3 = list[0]['media_id'];
				this.music_img = list[0]['attachment'];
			},

			on_add_img(list) {

				this.musicurl = list[0]['attachment'];
				this.picurl = list[0]['attachment'];
				this.img_url = list[0]['attachment'];
				this.img_list = list;
				this.media_id = list[0]['media_id'];

			},
			_add_image1(t_type, aa_name) {
				this.aa_type = t_type;
				this.aa_name = aa_name;
				this.$refs.alertDialog_image_a.open()
			},

			_add_image(t_type, aa_name) {
				this.aa_type = t_type;
				this.aa_name = aa_name;
				this.$refs.alertDialog_image_x.open()
			},
			onplay() {
				// this.onplay_applets();
				this.$refs.alertDialog_add_key.on_add()
			},


			onplay_applets() {
				if (!this.title) {
					uni.showToast({
						title: '请输入标题',
						icon: 'none'
					})
					return
				}
				if (!this.appid) {
					uni.showToast({
						title: '请输入小程序appid',
						icon: 'none'
					})
					return
				}
				if (!this.miniprogram) {
					uni.showToast({
						title: '请输入小程序路径',
						icon: 'none'
					})
					return
				}

				this.find.title = this.title;
				this.find.miniprogram = this.miniprogram;
				this.find.url = this.url;
				this.find.appid = this.appid;
				this.find.media_id = this.media_id;
				this.find.img_url = this.img_url;
				this.$emit('on_add_img', this.find);
				this.popup.close()

			},

			onOk() {
				if (this.mode === 'input') {
					this.$emit('confirm', this.val)
				} else {
					this.$emit('confirm')
				}
				if (this.beforeClose) return
				this.popup.close()
			},
			/**
			 * 点击取消按钮
			 */
			closeDialog() {

				this.popup.close()
			},
			close() {
				this.$emit('on_ok')
				this.popup.close()
			}
		}
	}
</script>


<style lang="scss">
	button::after {
		border: none;
	}

	button {
		background-color: initial;
	}

	.newmask {
		position: fixed;
		top: 0;
		left: 0;
		width: 750px;
		height: 2500px;
		z-index: 8888;
		background-color: rgba(0, 0, 0, 0.6);
	}

	.key_color {
		color: #1E90FF;
	}

	.key_xz {
		width: 15px;
		height: 15px;
		border: solid 1px #1E90FF;
		color: #1E90FF;
	}

	.key_wxz {
		width: 15px;
		height: 15px;
		border: solid 1px #7C838B;
		color: #7C838B;
	}

	.newmask {
		position: fixed;
		top: 0;
		left: 0;
		width: 750px;
		height: 2500px;
		z-index: 8888;
		background-color: rgba(0, 0, 0, 0.6);
	}

	.btn {
		width: 70%;
		margin: 20px auto;
		margin-top: 40px;
		padding: 20px 0px;
		text-align: center;
		background: #4884FF;
		border-radius: 34px;
		font-size: 30px;
		color: #fff;
	}

	//微信弹窗
	.wxbox {
		position: absolute;
		top: 20%;
		z-index: 9999;
		width: 80%;
		left: 10%;
		background-color: #fff;
		border-radius: 30px;
		padding: 30px 0px;

		.close {
			position: absolute;
			top: 5px;
			right: 10px;
			z-index: 9999;
			text-align: center;
		}

		.weixin {
			margin: 20px 0 0 0px;
			text-align: center;

			image {
				width: 100px;
				height: 100px;
			}
		}

		.tips {
			padding: 10px 20px;
			text-align: center;
			font-size: 35px;
			color: #333;
		}
	}

	//红包弹窗
	.redbox {
		position: fixed;
		top: 250px;
		z-index: 9998;
		width: 675px;
		left: 37.5px;
		padding: 10px 0px;




	}

	.messBox {
		position: absolute;
		top: 12%;
		z-index: 9998;
		width: 80%;
		left: 10%;
		padding: 150px 0px;

		.wrapBox {
			background-color: #fff;
			border-radius: 20px;
			padding: 30px;

			.title {
				text-align: center;
				font-size: 32px;
				font-weight: bold;
			}

			.desc {
				height: 400px;
				margin-top: 20px;
				font-size: 30px;
			}
		}
	}

	.updateBox {
		position: absolute;
		top: 20%;
		z-index: 9998;
		height: 300px;
		width: 80%;
		left: 10%;

		.tubiao {
			text-align: center;

			image {
				z-index: 999;
				width: 200px;
				height: 130px;
			}
		}

		.wrapbox {
			position: relative;
			z-index: 9999;
			top: -70px;
			background-color: #fff;
			border-radius: 10px;
			padding: 30px 40px;

			.version {
				margin-top: 50px;
				font-size: 35px;
				color: #333;
				font-weight: bold;
				text-align: center;
			}

			.desc-t {
				margin-top: 30px;
				font-size: 32px;
				font-weight: bold;
			}
		}
	}

	.updateBox1 {
		position: absolute;
		top: 15%;
		z-index: 9999;
		width: 80%;
		left: 10%;
		padding: 10px;
		height: 700px;

		image {
			width: 100%;
			height: 100%;
		}

		.wrapBox {
			position: absolute;
			width: 85%;
			left: 50px;
			top: 40px;
			padding: 10px 20px;

			.version {
				font-size: 35px;
				color: #fff;
			}

			.desc-t {
				margin-top: 100px;
				font-size: 32px;
				font-weight: bold;
			}
		}
	}

	.desc {
		height: 230px;
		overflow: scroll;
		margin-top: 10px;
		font-size: 30px;
		color: #666;
		line-height: 50px;
	}

	.btnbox {
		display: banmi_flex;
		justify-content: space-around;
		margin: 40px 0px 20px 0px;
		margin-top: 50px;

		.btnno {
			padding: 10px 30px;
			background-color: #f8f8f8;
			border-radius: 10px;
			font-size: 30px;
			color: #666;
		}

		.btnUp {
			padding: 10px 30px;
			background-color: #4884FF;
			border-radius: 10px;
			font-size: 30px;
			color: #fff;
		}
	}

	.btn {
		width: 70%;
		margin: 20px auto;
		margin-top: 40px;
		padding: 20px 0px;
		text-align: center;
		background: #4884FF;
		border-radius: 34px;
		font-size: 30px;
		color: #fff;
	}

	//微信弹窗
	.wxbox {
		position: absolute;
		top: 20%;
		z-index: 9999;
		width: 80%;
		left: 10%;
		background-color: #fff;
		border-radius: 30px;
		padding: 30px 0px;

		.close {
			position: absolute;
			top: 5px;
			right: 10px;
			z-index: 9999;
			text-align: center;
		}

		.weixin {
			margin: 20px 0 0 0px;
			text-align: center;

			image {
				width: 100px;
				height: 100px;
			}
		}

		.tips {
			padding: 10px 20px;
			text-align: center;
			font-size: 35px;
			color: #333;
		}
	}

	.key_slxz {
		border-bottom: solid 2px #1E90FF;
		padding-bottom: 5px;
	}

	.key_slwxz {
		border-bottom: solid 2px #fff;
		padding-bottom: 5px;
	}

	//红包弹窗
	.redbox {
		position: fixed;
		top: 250px;
		z-index: 9998;
		width: 675px;
		left: 37.5px;
		padding: 10px 0px;




	}

	.messBox {
		position: absolute;
		top: 12%;
		z-index: 9998;
		width: 80%;
		left: 10%;
		padding: 150px 0px;

		.wrapBox {
			background-color: #fff;
			border-radius: 20px;
			padding: 30px;

			.title {
				text-align: center;
				font-size: 32px;
				font-weight: bold;
			}

			.desc {
				height: 400px;
				margin-top: 20px;
				font-size: 30px;
			}
		}
	}

	.updateBox {
		position: absolute;
		top: 20%;
		z-index: 9998;
		height: 300px;
		width: 80%;
		left: 10%;

		.tubiao {
			text-align: center;

			image {
				z-index: 999;
				width: 200px;
				height: 130px;
			}
		}

		.wrapbox {
			position: relative;
			z-index: 9999;
			top: -70px;
			background-color: #fff;
			border-radius: 10px;
			padding: 30px 40px;

			.version {
				margin-top: 50px;
				font-size: 35px;
				color: #333;
				font-weight: bold;
				text-align: center;
			}

			.desc-t {
				margin-top: 30px;
				font-size: 32px;
				font-weight: bold;
			}
		}
	}

	.updateBox1 {
		position: absolute;
		top: 15%;
		z-index: 9999;
		width: 80%;
		left: 10%;
		padding: 10px;
		height: 700px;

		image {
			width: 100%;
			height: 100%;
		}

		.wrapBox {
			position: absolute;
			width: 85%;
			left: 50px;
			top: 40px;
			padding: 10px 20px;

			.version {
				font-size: 35px;
				color: #fff;
			}

			.desc-t {
				margin-top: 100px;
				font-size: 32px;
				font-weight: bold;
			}
		}
	}

	.c_7 {
		color: #777777;
	}

	.desc {
		height: 230px;
		overflow: scroll;
		margin-top: 10px;
		font-size: 30px;
		color: #666;
		line-height: 50px;
	}

	.btnbox {
		display: banmi_flex;
		justify-content: space-around;
		margin: 40px 0px 20px 0px;
		margin-top: 50px;

		.btnno {
			padding: 10px 30px;
			background-color: #f8f8f8;
			border-radius: 10px;
			font-size: 30px;
			color: #666;
		}

		.btnUp {
			padding: 10px 30px;
			background-color: #4884FF;
			border-radius: 10px;
			font-size: 30px;
			color: #fff;
		}
	}

	.classify-liv {
		text-align: center;
		align-items: center;
		padding-bottom: 10px;
		border: solid 1px #FD9A01;
		text-align: center;
		color: #999;
		border-radius: 10px;
		width: 200px;
		font-size: 24upx;
		margin: 10;

	}

	.classify-lixzlv {
		text-align: center;
		align-items: center;
		padding-bottom: 10px;
		border: solid 1px #999;

		color: #999;
		border-radius: 10px;
		width: 200px;
		font-size: 24upx;
		margin: 10;

	}

	@media screen and (max-width: 500px) {
		.uni-popup-dialog {
			width: 700rpx;
			border-radius: 11px;
			background-color: #fff;
		}
	}

	@media screen and (min-width: 500px) {
		.uni-popup-dialog {
			width: 800px;
			border-radius: 11px;
			background-color: #fff;
		}

	}

	.uni-dialog-title {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding-top: 25px;
	}

	.uni-dialog-title-text {
		font-size: 16px;
		font-weight: 500;
	}

	.uni-dialog-content {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		padding-top: 10px;
	}

	.uni-dialog-content-text {
		font-size: 14px;
		color: #6C6C6C;
	}

	.f20 {
		font-size: 24px;
	}

	.uni-dialog-button-group {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;

	}

	.uni-dialog-button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */

		flex: 1;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 45px;
	}

	.uni-border-left {
		border-left-color: #f0f0f0;
		border-left-style: solid;
		border-left-width: 1px;
	}

	.uni-dialog-button-text {
		font-size: 16px;
		color: #333;
	}

	.uni-button-color {
		color: #007aff;
	}

	.uni-dialog-input {
		flex: 1;
		font-size: 14px;
		border: 1px #eee solid;
		height: 40px;
		padding: 0 10px;
		border-radius: 5px;
		color: #555;
	}

	.uni-popup__success {
		color: #4cd964;
	}

	.uni-popup__warn {
		color: #f0ad4e;
	}

	.uni-popup__error {
		color: #dd524d;
	}

	.uni-popup__info {
		color: #909399;
	}
</style>